$(function() {
    $('#mapa').vectorMap({
        map: 'cundi',
        backgroundColor: '#333',
        zoomButtons: true,
        zoomOnScroll: true,
        panOnDrag: true,
        zoomMax: 8,
        zoomMin: 1,
        zoomStep: 2,
        zoomAnimate: true,
        regionsSelectable: false,
        markersSelectable: true,
        bindTouchEvents: true,
        regionStyle: {
            initial: {
                fill: 'white',
                "fill-opacity": 1,
                stroke: 'black',
                "stroke-width": 1,
                "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 0.8,
                cursor: 'pointer'
            },
            selected: {
                fill: 'yellow'
            },
            selectedHover: {
            }
        },
        regionLabelStyle: {
            initial: {
                'font-family': 'Verdana',
                'font-size': '12',
                'font-weight': 'bold',
                cursor: 'default',
                fill: 'black'
            },
            hover: {
                cursor: 'pointer'
            }
        },
        markerStyle: {
            initial: {
                fill: 'grey',
                stroke: '#505050',
                "fill-opacity": 1,
                "stroke-width": 1,
                "stroke-opacity": 1,
                r: 5
            },
            hover: {
                stroke: 'black',
                "stroke-width": 10,
                cursor: 'pointer'
            },
            selected: {
                fill: 'blue'
            },
            selectedHover: {
            }
        },
        markerLabelStyle: {
            initial: {
                'font-family': 'Verdana',
                'font-size': '12',
                'font-weight': 'bold',
                cursor: 'default',
                fill: 'black'
            },
            hover: {
                cursor: 'pointer'
            }
        },
        onRegionClick: function(event, code) {
            $.ajax({
                url:   'include/ajax/consultarPredios.php?idMunicipio='+code,
                type:  'get',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                    
                    alert(response);
                    
                    $("#resultado").html(response);
                }
        });
        }
    });
});